<template>
  <div id="dashborad">
    <div class="header">
      <h1 class="header-title">毕业设计管理系统</h1>
      <el-header class="header-nav">
        <span class="header-user" v-text="loginUser.username"></span>
        <a @click="logout()" style="cursor: pointer">注销</a>
      </el-header>
    </div>

    <div class="container">
      <el-menu class="container-nav">
        <!-- 功能模块 -->
        <!-- 选题模块 -->
        <el-submenu index="select-topic">
          <template slot="title"><i class="el-icon-user"></i>选题</template>
          <div v-if="loginUser.identity === '1'">
            <el-menu-item
              index="select-topic-teacher"
              @click="goPage('/select-topic-teacher')"
              >选题题目</el-menu-item
            >
            <el-menu-item
              index="preselect-teacher"
              @click="goPage('/preselect-teacher')"
              >学生预选题目</el-menu-item
            >
            <el-menu-item
              index="thesis-assignment-teacher"
              @click="goPage('/thesis-assignment-teacher')"
              >论文任务书</el-menu-item
            >
          </div>
          <div v-if="loginUser.identity === '0'">
            <el-menu-item
              index="select-topic-student"
              @click="goPage('/select-topic-student')"
              >预选题目</el-menu-item
            >
            <el-menu-item
              index="thesis-assignment-student"
              @click="goPage('/thesis-assignment-student')"
              >论文任务书</el-menu-item
            >
          </div>
        </el-submenu>

        <!-- 论文阅读模块 -->
        <el-submenu index="thesis-reading">
          <template slot="title"><i class="el-icon-bell"></i>论文阅读</template>
          <div v-if="loginUser.identity === '1'">
            <el-menu-item index="thesis-reading-assignment"
              @click="goPage('/thesis-reading-assignment')">论文阅读安排</el-menu-item>
            <el-menu-item index="reading-note-review"
              @click="goPage('/reading-note-review')">阅读笔记评价</el-menu-item>
          </div>
          <div v-if="loginUser.identity === '0'">
            <el-menu-item ndex="thesis-reading"
              @click="goPage('/thesis-reading')">论文阅读</el-menu-item>
            <el-menu-item index="reading-note-review-student"
              @click="goPage('/reading-note-review-student')">阅读笔记评价</el-menu-item>
          </div>
        </el-submenu>

        <el-submenu index="opening-repoat">
          <template slot="title"><i class="el-icon-menu"></i>开题报告</template>
          <div v-if="loginUser.identity === '1'">
            <el-menu-item index="opening-report-template-teacher" @click="goPage('/opening-report-template-teacher')">开题报告模板</el-menu-item>
            <el-menu-item index="opening-report-review" @click="goPage('/opening-report-review')">查看学生开题报告</el-menu-item>
          </div>
          <div v-if="loginUser.identity === '0'">
            <el-menu-item index="opening-report-template" @click="goPage('/opening-report-template')">开题报告模板下载</el-menu-item>
            <el-menu-item index="opening-report-submit" @click="goPage('/opening-report-submit')">开题报告提交</el-menu-item>
          </div>
        </el-submenu>
      </el-menu>

      <el-card class="container-main">
        <router-view />
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "Dashborad",

  data() {
    return {
      loginUser: {
        id: "",
        username: "",
        identity: "0",
      },
    };
  },
  methods: {
    goPage(path) {
      this.$router.push(path);
    },
    logout() {
      localStorage.removeItem("loginUser");
      (this.loginUser = {}), this.goPage("login");
    },
  },
  created() {
    this.loginUser = JSON.parse(localStorage.getItem("loginUser"));
  },
};
</script>

<style>
#dashborad {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.header {
  height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #bbb;
  background-color: #eee;
}
.header-title {
  font-size: 22px;
  color: skyblue;
  margin-left: 10%;
}
.header-nav {
  line-height: 60px;
  display: flex;
}
.header-user {
  margin-right: 16px;
  font-size: 16;
}
.header-dropdown {
  cursor: pointer;
}
.container {
  background-color: azure;
  flex: 1;
  display: flex;
  flex-direction: row;
}
.container-nav {
  width: 200px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.container-main {
  flex: 1;
  background-color: cornflowerblue;
}
</style>
